<template>
  <div class="leave-message-wrap">
    <ul>
      <li class="flex" v-for="(item, i) in messageList" :key="i">
        <a-avatar :size="24" v-if="item.headerImage">
          <img alt="" :src="item.headerImage" />
        </a-avatar>
        <a-avatar :size="24" v-else>{{ item.userName ? item.userName.substring(0, 1) : 'L' }}</a-avatar>
        <div class="message-con">
          <p style="margin-bottom: 2px">
            <span>{{ item.userName }}</span>
            <span class="small-font">{{ $setTime(item.leaveTime) }}</span>
          </p>
          <p style="font-size: 12px">{{ item.message }}</p>
        </div>
      </li>
    </ul>
    <div class="send-message flex-c" v-if="type == 2 && status == 'IN_APPROVAL'">
      <a-textarea placeholder="" v-model="msgVal" style="width: 400px; margin-right: 10px" allow-clear />
      <a-button type="primary" :loading="submitLoading" @click="submitMsg">发送</a-button>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { ref, PropType } from 'vue'
  import { addProcessMessage } from '@/api/workFlow'
  import { Message } from '@arco-design/web-vue'
  const props = defineProps({
    messageList: {
      type: Array as PropType<Array<any>>,
      default: () => [],
    },
    id: {
      type: String,
    },
    type: {
      //审批类型 2待审批的单据才能编辑
      type: [String, Number],
    },
    status: {
      //审批状态
      type: String,
    },
  })
  const submitLoading = ref(false)
  const msgVal = ref('')
  const emit = defineEmits(['success'])

  // 发送留言
  async function submitMsg() {
    if (!msgVal.value) {
      Message.error('请输入留言！')
      return
    }
    submitLoading.value = true
    const res: any = await addProcessMessage({
      id: props.id,
      message: msgVal.value,
    })
    submitLoading.value = false
    if (res) {
      msgVal.value = ''
      emit('success')
    }
  }
</script>

<style lang="less" scoped>
  li {
    margin-top: 10px;
  }
  .message-con {
    margin-top: 2px;
    margin-left: 10px;
  }
  .small-font {
    font-size: 12px;
    color: #999;
    margin-left: 10px;
  }
  .send-message {
    margin-top: 20px;
  }
</style>
